<template>
	<view class="tabpay">
		<view class="header">
			<view class="title">充值数额</view>
			<view class="desc">1元=1积分</view>
		</view>
		<view>
			<input placeholder="请选择或输入充值数额" class="amount" type="digit" v-model="num"/>
		</view>
		<view class="options">
			<view v-for="(itm, index) in options" @click="chgOption(itm,index)" class="options-item" :class="index==selectedIndex?'active':''">
				<view class="point">{{itm}}积分</view>
				<view class="cny">￥{{itm}}</view>
				<view class="corner" v-if="itm==num">
					<!-- <image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/corner.png" mode="widthFix" style="width:50rpx"></image> -->
					<img style="width:50rpx;height: 50rpx;" src=""/>
				</view>
			</view>
			
		</view>
	
		
		
		
		<view class="btn" @tap="submitPay">
			立即充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options:[10,50,100, 200, 300, 500],
				selectedIndex:0,
				checked:false,
				num:10,
				accessId:''
			}
		},
		onLoad() {
			this.accessId = uni.getStorageSync('accessId')
		},
		methods: {
			chgOption(itm,index){
				this.selectedIndex = index;
				this.num = itm
			},
			
			chgStatus(){
				if(this.checked){
				    this.checked = false;
				}else{
					this.checked = true;
				}
			},
			submitPay() {
				let _this = this
				// if (this.checked == false) {
				// 	uni.showToast({
				// 		title: '请选择支付方式',
				// 		duration: 2000,
				// 		icon: "none"
				// 	})
				// 	return
				// }
				var reg =
					/(^[1-9](\d+)?(\.\d{1,2})?$)|(^[1-9]$)|(^\d\.[1-9]{1,2}$)|(^\d\.[0]{1}[1-9]{1}$|(^\d\.[1-9]{1}[0]{1}$)$)/;
				if (reg.exec(_this.num)) {
					console.log('验证通过');
				} else {
					uni.showToast({
						title: "输入金额不正确",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				console.log(_this.num)
			
				uni.showModal({
					title: '支付',
					content: '确认支付？',
					success: function(res) {
						if (res.confirm) {
							console.log("=============" + _this.num)
							
							_this.$api.topUpIntegral({
								newPoints: Number(_this.num),
								payType:"JSAPI",
								accessId:_this.accessId
							}).then((res) => {
								console.log(res)
								console.log(JSON.stringify(res.data.dataMap))
			
			uni.requestPayment({
				appId:res.data.dataMap.appid,
			    provider: 'wxpay',
			    timeStamp:res.data.dataMap.timeStamp,
			    nonceStr: res.data.dataMap.nonceStr,
			    package: res.data.dataMap.package,
			    signType: 'MD5',
			    paySign: res.data.dataMap.paySign,
			    success: function (res) {
			        console.log('success:' + JSON.stringify(res));
					uni.showToast({
						title: '支付成功',
						duration: 500,
						icon: "none"
					});
					uni.navigateBack({
						delta:1,
						animationDuration:1000
					})			
			    },
			    fail: function (err) {
			       uni.showToast({
			       	title: '支付失败',
			       	duration: 500,
			       	icon: "none"
			       });
			    }
			});
			
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: "none"
							})
						}
					}
				});
			
			}
		}
	}
</script>

<style lang="scss" scoped>
  .tabpay{padding:20px;}
  .form-radio{transform: scale(0.7);}
 .title{font-size:33rpx;color: #666666;font-weight: 500;}
.header{
	display: flex;
	justify-content: space-between;
	align-items:end;
	.desc{color:#999999}
}
.corner{
	position: absolute;
	bottom:-4px;
	right:0;
}
.amount{
	margin-top:10px;
	background: #F2F2F2;
	border-radius:5px;
	padding:5px  20px;
}
.options{
	display: grid;
	width: calc(100% -  15px);
	grid-template-columns: 33% 33% 33%;
	column-gap: 8px;
	text-align: center;
	.options-item{border:1px solid #CCCCCC;border-radius: 5px;padding:9px;margin-top:10px;
	   position: relative;
	   .point{color:#333333;font-size: 30rpx;}
	   .cny{color:#AAAAAA;font-size: 30rpx;}
	}
	.active{
		border:1px solid #FF5533;
		.point{color:#FF5533}
	}
}
.payment{
	border:2px solid #FF5533;
	border-radius: 50px;
	font-size:34rpx;
	font-weight: bold;
	color:#FF5533;
	height: 60rpx;
	margin-top:10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
.btn{
   background-color: #FF5533;
   border-radius:50px;
   padding: 13px;
   width: 100%;
   box-sizing: border-box;
   font-size: 28rpx;
   color:white;text-align: center;
   margin: 140rpx auto;
}
</style>
